@charset "UTF-8";
body{
    background-color:rgba(0,0,0,0);
}
::-webkit-scrollbar {
	width: 6px;
    background-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb {
	background-color: #333;
}
.foodinfo_background{
    width: 69%;
	height: 80%;
	margin: auto;
    position: absolute;
    left: -11%;
    right: 0;
    top: 0;
    bottom: 0;
    z-index:-1;
}

.foodinfo {
	margin:9px 16px;
	background-color:rgba( 255, 255, 255,.5);
	float: left;
	width: 480px;
	height: 110px;
	border-radius:8px;
	min-width:480px;
	transition: all 1s;
	box-shadow: 2px 2px 2px -2px rgba(13,160,230,0.1);
}

.foodinfo img {
	border-radius:8px 0 0 8px;
	cursor: pointer;
	width: 112%;
	height: auto;
	float: left;
	-webkit-transition: all 1s;
}

.foodinfo strong {
	font-size: 18px;
	font-weight: 400;
	float: left;
}

.foodinfo input {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
    width: 32px;
	text-align: center;
	float: left;
    height:22.4px;
    line-height:22.4px;
}

.foodinfo input[type="number"]{
    font-size: 16px;
    -webkit-transition: all 1s;
}
.foodinfo input[type="button"]{
    font-size: 26px;
    -webkit-transition: all .32s;
}

.foodinfo input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
	-webkit-appearance: none;
}

.foodinfo:hover{
	background-color:rgba(255, 255, 255, 0.8);
}

.foodinfo:hover input {
	background-color: rgba(30, 137, 224, 0.7)!important;
    color:#fff!important;
	-webkit-transition: all .1s;
	box-shadow: 9px 7px 40px -6px rgba(30, 137, 224, 0.3);
}
.foodinfo:hover input[type="number"]{
    border-radius:0!important;
}

.starFive {
	position: relative;
}

.starFive::after {
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}

.starFive span {
	margin: 0 0 0px 0;
	padding: 0;
	display: block;
	font-size: 20px;
	color: #999;
	width: fit-content;
	height: 20px;
	overflow: hidden;
	white-space: pre;
}

#mfgrade>.starFive>span {
	line-height: 16px;
}

#degrade>.starFive>span {
	line-height: 21px;
}

.starFive .spanc {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	z-index: 1;
	overflow: hidden;
	color: #eb6643;
}

.foodinfo input:hover, .fooddetail input:hover{
	box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0
		rgba(0, 0, 0, .2);
}

.foodinfo label {
	cursor: pointer;
	float: left;
	font-weight: 400;
	margin-left:10px;
}

.btn_group1{
	width:39%;
	margin-right:20%;
	float:right;
}
.btn_group1 input[type="button"],.btn_group1 input[type="number"]{
    background-color:rgba(0,0,0,0);
    color:rgba(0,0,0,0);
}

.btn_group2{
	width:43%;
	margin-right:10%;
	float:right;
}

.fooddetail{
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	height: 335px; 
	width: 700px;
	z-index: 100;
	border-radius:10px;
	background-color: rgba(255,255,255, 0.9);
	box-shadow:9px 7px 40px -6px rgba(0, 0, 0, 0.25);
	-webkit-transition: box-shadow 0.3s;
	transition: all 0.5s;
}

.fooddetail label{
	font-size:16px;
	float: left;
	font-weight: 400;
	margin-left:10px;
}

.fooddetail strong{
	font-size:22px;
	float: left;
	font-weight: 400;
}

.fooddetail img {
	border-radius:8px 0 0 8px;
	width: 100%;
	height: auto;
	float: left;
}

.fooddetail input {
	font-size: 20px;
	color: #fff;
	background-color: rgba(30, 137, 224, 0.7);
	box-shadow:9px 7px 40px -6px rgba(30, 137, 224, 0.3);
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	width: 50px;
	text-align: center;
	float: left;
	-webkit-transition: all 1s;
}

#mfgrade,#degrade{
	display: flex;
}
.fooddetail .favour{
	cursor: pointer;
	font-size: 40px;
	float:right;
	margin-right:14%;
	color:rgba(100,100,100,0.6);
}
.fooddetail .favour:hover{
	color:rgba(255,100,100,0.6);
    transition: all .5s;
}

.iloveit{
	color:rgba(255,50,50,0.6)!important;
}

.detailbackground{
    z-index:100;
	top: 0%;
	left: 0%; 
	height: 100%; 
	width: 100%; 
	display: none;
	position: fixed;
	z-index: 99;
	background-color: rgba(0,0,0, 0.3);
	transition: all 0.5s;
}

.detail_close span{
    position: absolute;
    top: 1%;
    right: 0;
    left: 96%;
    font-size: 25px;
    z-index:101;
}

.dot {
	position:absolute;
	width:17px;
	height:17px;
	background: rgba(220, 137, 220, 0);
}

.dot .dot-after{
	z-index:1000;
	position:absolute;
	width:17px;
	height:17px;
	border-radius:100%;
	background: rgba(0, 137, 220, 1);
}